.host {
  display: block;
}

.withPadding {
  padding-block: var(--vkui--size_form_item_padding_vertical--regular);
  padding-inline: var(--vkui--size_base_padding_horizontal--regular);
}

.withRemovable {
  padding-inline: 0;
}

.removable {
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: 0;
  min-inline-size: 1px;
  max-inline-size: 100%;
  padding: 0;
  overflow: hidden;
}

.top {
  display: flex;
  align-items: flex-end;
  padding-block: var(--vkui--spacing_size_2xs) var(--vkui--spacing_size_m);
  color: var(--vkui--color_text_subhead);
}

.label,
.aside {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.label {
  flex: 1;
}

.aside {
  margin-inline-start: auto;
  color: var(--vkui--color_text_tertiary);
}

.aside:not(:only-child) {
  padding-inline-start: 12px;
}

.labelMultiline {
  text-overflow: unset;
  white-space: normal;
}

.labelRequired {
  margin-inline-start: 3px;
  color: var(--vkui--color_text_negative);
}

.bottom {
  padding-block-start: var(--vkui--spacing_size_m);
  color: var(--vkui--color_text_secondary);
}

.statusError .bottom {
  color: var(--vkui--color_text_negative);
}

.statusValid .bottom,
.verified .bottom {
  color: var(--vkui--color_text_positive);
}

/**
 * sizeY COMPACT
 */

.sizeYCompact .top {
  padding-block-end: var(--vkui--spacing_size_s);
}

.sizeYCompact .bottom {
  padding-block-start: var(--vkui--spacing_size_s);
}

@media (--sizeY-compact) {
  .sizeYNone .top {
    padding-block-end: var(--vkui--spacing_size_s);
  }

  .sizeYNone .bottom {
    padding-block-start: var(--vkui--spacing_size_s);
  }
}

/**
 * CMP:
 * FormLayoutGroup
 */
/* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
:global(.vkuiInternalFormLayoutGroup--mode-horizontal) .host {
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: 0;
  min-inline-size: 1px;
  max-inline-size: 100%;
  padding: 0;
}

/* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
:global(.vkuiInternalFormLayoutGroup--mode-horizontal:not(.vkuiInternalFormLayoutGroup--segmented))
  .host
  + .host {
  margin-inline-start: var(--vkui--spacing_size_2xl);
}

/* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
:global(.vkuiInternalFormLayoutGroup--mode-horizontal.vkuiInternalFormLayoutGroup--segmented)
  .host
  + .host {
  margin-inline-start: calc(-1 * var(--vkui--size_border--regular));
}

/* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
:global(.vkuiInternalFormLayoutGroup--mode-vertical.vkuiInternalFormLayoutGroup--segmented)
  .host
  + .host {
  padding-block-start: 0;
  margin-block-start: calc(-1 * var(--vkui--size_border--regular));
}

/* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
:global(.vkuiInternalFormLayoutGroup--mode-vertical.vkuiInternalFormLayoutGroup--segmented)
  .host:not(:last-of-type) {
  padding-block-end: 0;
}

/* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
:global(.vkuiInternalFormLayoutGroup--mode-horizontal) .withTop,
.withTop .removable {
  margin-block-start: calc(
    -1 *
    var(--vkui--spacing_size_2xs) -
    var(--vkui--font_subhead--line_height--regular) -
    var(--vkui--spacing_size_m)
  );
}

/* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
:global(.vkuiInternalFormLayoutGroup--mode-horizontal) .sizeYCompact.withTop,
.sizeYCompact.withTop .removable {
  margin-block-start: calc(
    -1 *
    var(--vkui--spacing_size_2xs) -
    var(--vkui--font_subhead--line_height--compact) -
    var(--vkui--spacing_size_s)
  );
}

@media (--sizeY-compact) {
  /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
  :global(.vkuiInternalFormLayoutGroup--mode-horizontal) .sizeYNone.withTop,
  .sizeYNone.withTop .removable {
    margin-block-start: calc(
      -1 *
      var(--vkui--spacing_size_2xs) -
      var(--vkui--font_subhead--line_height--compact) -
      var(--vkui--spacing_size_s)
    );
  }
}
